import { CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { message } from 'antd';
import axios from 'axios';
import { connect } from 'dva';
import { saveAs } from 'file-saver';
import React from 'react';
import ComStar from '@/src/utils/enumeratedValues/ComStar';
import { exportFile } from '../../../../utils/commonFunc';
import { IconC, ModalC, PrimaryGhostC, PrimaryTextC, TableC, XYAxisChartsC } from '../../../../comps';

class UploadHistory extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1, // 当前页码
      pageSize: 10,
      total: 0,
      dataSource: [],
      columns: [
        {
          title: '上传时间',
          dataIndex: 'uploadTime',
          key: 'uploadTime',
        },
        {
          title: '上传人',
          dataIndex: 'uploader',
          key: 'uploader',
        },
        {
          title: '模板来源',
          dataIndex: 'templateSource',
          key: 'templateSource',
        },
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type',
          render: (_) => {
            if (_) {
              const typeDes = ComStar.find((v) => v.value == _);
              return typeDes && typeDes.title;
            }
            return '--';
          },
        },
        {
          title: '文件名',
          dataIndex: 'fileName',
          key: 'fileName',
          render: (text, record) => (
            <PrimaryTextC
              title={text}
              onClick={() => {
                this.downLoadFile(record);
              }}
            />
          ),
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          // 0 上传成功， 2 上传中， 1上传失败 3执行中
          render: (text, record) => {
            if (text == 0) {
              return (
                <span>
                  <CheckCircleOutlined style={{ color: '#03ba8a' }} /> 上传成功 <IconC title={record?.statusTips} type='info' />
                </span>
              );
            }
            if (text == 2) {
              return (
                <span>
                  <InfoCircleOutlined style={{ color: '#4c7cff' }} /> 上传中
                </span>
              );
            }
            if (text == 3) {
              return (
                <span>
                  <InfoCircleOutlined style={{ color: '#4c7cff' }} /> 执行中
                </span>
              );
            }
            if (text == 1) {
              return (
                <span>
                  <CloseCircleOutlined style={{ color: '#f4423a' }} /> 上传失败 <IconC title={record?.statusTips} type='info' />
                </span>
              );
            }
            return <div>--</div>;
          },
        },
      ],
    };
  }

  componentDidMount() {
    this.getUploadHistory();
    this.timer = setInterval(() => {
      this.getUploadHistory();
    }, 1000 * 10);
  }

  componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  getUploadHistory() {
    const { currentPage, pageSize } = this.state;
    const _this = this;
    // eslint-disable-next-line react/prop-types
    this.props.dispatch({
      type: 'bookkeepingMntM/getUploadHistory',
      payload: {
        currentPage,
        pageSize,
        params: {},
      },
      callback(res) {
        if (res) {
          _this.setState({
            dataSource: res.data,
            currentPage: res.pageInfo.currentPage,
            total: res.pageInfo.total,
            pageSize: res.pageInfo.pageSize,
          });
        } else {
          this.setState({
            dataSource: [],
          });
        }
      },
    });
  }

  downLoadFile(record) {
    exportFile(`gateway/file/maat-admin/file/download`, { uniquekey: record.fileStreamId });
  }

  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    this.setState(
      {
        currentPage: current,
        pageSize,
      },
      () => {
        this.getUploadHistory();
      },
    );
  };

  render() {
    const { open, onOk, onCancel, loading } = this.props;
    const { dataSource, columns } = this.state;
    return (
      <React.Fragment>
        <ModalC title='上传记录' visible={open} maskClosable={false} onOk={onOk} onCancel={onCancel} footer={null} width={1000}>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 10 }}>
            <PrimaryGhostC
              title='刷新'
              onClick={() => {
                this.getUploadHistory();
              }}
            />
          </div>
          <TableC
            columns={columns}
            dataSource={dataSource || []}
            loading={loading.effects['bookkeepingMntM/getUploadHistory']}
            rowKey='fileStreamId'
            scroll={{ x: 'max-content' }}
            pagination={true}
            onChange={this.handleTableChange}
            current={this.state.currentPage}
            pageSize={this.state.pageSize}
            total={this.state.total}
          />
        </ModalC>
      </React.Fragment>
    );
  }
}
export default connect(({ loading }) => ({
  loading,
}))(UploadHistory);
